<template>
  <el-dialog
    :title="dialog.title"
    :visible.sync="dialog.show"
    :before-close="beforeClose"
    :close-on-click-modal="false"
    class="menu-save-dialog"
    v-alterELDialogMarginTop="{marginTop:'0'}"
  >
    <div class="form-container">
      <el-form :model="menu" ref="childForm" label-width="80px" label-position="left">
        <el-form-item prop="title" label="菜单名称" >
          <el-input v-model.trim="menu.title" placeholder="例如：个人办公"></el-input>
        </el-form-item>
        <el-form-item prop="name" label="路由名称">
          <el-input v-model.trim="menu.name" placeholder="例如：MenuList"></el-input>
        </el-form-item>
        <el-form-item prop="path" label="路径">
          <el-input v-model.trim="menu.path" placeholder="例如：/menu（一级菜单以/开头）" ></el-input>
        </el-form-item>
        <el-form-item prop="icon" label="图标">
          <el-input v-model.trim="menu.icon" placeholder="例如：table"></el-input>
        </el-form-item>
        <el-form-item prop="hidden" label="是否隐藏">
          <el-switch v-model="menu.hidden"></el-switch>
          <span v-text="menu.hidden ? '是' : '否'"></span>
        </el-form-item>
        <el-form-item prop="pid" label="父级id">
          <el-input v-model.trim="menu.pid" placeholder="一级菜单父级id是0" ></el-input>
        </el-form-item>
        <el-form-item prop="sort" label="序号">
          <el-input v-model.trim="menu.sort" ></el-input>
        </el-form-item>

      </el-form>
    </div>
    <div slot="footer">
      <el-button type="default" @click="close">取 消</el-button>
      <el-button type="danger" @click="resetForm">重 置</el-button>
      <el-button
        type="success"
        @click="submitForm"
        :loading="dialog.changeLoading">保 存</el-button>
    </div>
  </el-dialog>
</template>

<script>
  import menuAPI from '@/api/menu/menu'
  export default {
    name: "MenuSave",
    data() {
      return {
        menu:{
          hidden: false,
          icon: "",
          id: '',
          name: "",
          path: "",
          pid: '',
          sort: '',
          title: ""
        },
        dialog:{
          show: false,
          title: '编辑菜单',
          changeLoading:false,
        }
      }
    },
    created() {
    },
    methods: {
      close(){
        this.resetForm()
        this.dialog.show = false
      },
      saveOrUpdate() {
        this.dialog.changeLoading = true
        const promise = this.menu.id ? menuAPI.edit(this.menu) : menuAPI.save(this.menu)
        promise.then(res => {
          this.dialog.changeLoading = false
          this.dialog.show = false
          this.resetForm()
          this.$emit('update')
        })

      },
      beforeClose(done){
        this.resetForm()
        done(true)
      },
      open(id) {

        if (id) {

          // this.getInfo(id)
        }

        this.dialog.show = true
      },
/*      getInfo(id){
        userAPI.getById(id).then(res=>{
          this.menu = res
          this.menu.password = ''
        })
      },*/
      resetForm(){
        this.$refs['childForm'].resetFields()
        this.menu.id = ''
      },
      submitForm(){
        this.$refs['childForm'].validate(valid => {
          if (valid && !this.dialog.changeLoading) {
            this.saveOrUpdate()
          }
        })
      }
    }
  }
</script>

<style scoped lang="scss">

</style>

